<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>十字路口堵塞过程</title>
		<style type="text/css">
			canvas {
				width: 800px;
				height: 600px;
				border: 1px solid #000000;
			}

			.div-controls {
				margin-bottom: 12px;
			}

			button {
				width: 120px;
				height: 30px;
			}
		</style>
		<script type="text/javascript">
			window.onload = function() {
				var c = document.getElementById("myCanvas");
				ctx = c.getContext("2d");
			}

			function btnStart_click() {
				ctx.strokeStyle='black';
				let x=400;
				let y=300;
				ctx.moveTo(0,0);
				ctx.lineTo(50,100);
				ctx.stroke();
				//
				ctx.beginPath();
				ctx.strokeStyle='red';
				ctx.arc(x,y,200,0,Math.PI*2, true);
				ctx.stroke();
				console.log('good');
			}
		</script>
	</head>
	<body>
		<div class="div-controls">
			<button class='btnStart' onclick="btnStart_click();">开始</button>
		</div>
		<canvas id="myCanvas" width="800" height="600"></canvas>
	</body>
</html>
